<template>
    <div class="app-container">
        <h1>{{ titleName }}</h1>

        <el-drawer title="评分评论" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
            <el-form ref="drawerForm" label-width="160px">
                <el-form-item label="电影评分">
                    <el-rate v-model="scoreSum" disabled show-score text-color="#ff9900" style="margin-top: 8px;"></el-rate>
                </el-form-item>
                <el-divider></el-divider>
                <h3>用户评论</h3>
                <!-- <el-form-item label="用户评论"></el-form-item> -->
                <el-collapse v-model="activeName" accordion v-for="item in commentList">
                    <el-collapse-item :title="item.username" name="1">
                        <span>{{ item.content }}</span>
                        <span style="float: right;"><el-button type="danger" style="height: 35px;" @click="delComment(item.id)">删除</el-button> </span>
                    </el-collapse-item>
                </el-collapse>
            </el-form>

        </el-drawer>

        <el-form ref="form" :model="movieForm" label-width="120px">
            <div style="float: right;position: absolute;margin-left: 550px;">
                <el-form-item label="电影剧照" v-if="movieForm.still != ''">
                    <img style="width:330px" referrerpolicy="no-referrer" :src="movieForm.still">
                </el-form-item>
            </div>

            <el-form-item label="电影名称">
                <el-input v-model="movieForm.movieName" readonly placeholder="请输入" style="width: 360px;"></el-input>
            </el-form-item>

            <el-form-item label="时长(min)">
                <el-inputNumber min=16 max=640 v-model="movieForm.last" disabled controls-position="right"
                    style="width: 360px;"></el-inputNumber>
            </el-form-item>

            <!-- <el-form-item label="电影类型" v-if="mode != 'detail'">
                <el-select v-model="movieForm.movieType" multiple placeholder="请选择(最多选取5个类型)" multiple-limit=5
                    size="medium" clearable style="width:360px">
                    <el-option v-for="item in movieTypeList" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item> -->

            <el-form-item label="电影类型" v-if="mode == 'detail'">
                <el-input v-model="movieForm.movieType" readonly style="width: 360px;"></el-input>
            </el-form-item>
            <!-- 
            <el-form-item label="电影剧照">
                <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" limit=7
                    v-model="movieForm.still">
                    <i class="el-icon-plus"></i></el-upload>
            </el-form-item> -->

            <el-form-item label="电影详述">
                <el-input type="textarea" v-model="movieForm.introduction" rows="6" readonly
                    style="width: 360px;"></el-input>
            </el-form-item>

            <el-form-item label="电影导演">
                <el-input v-model="movieForm.director" placeholder="请输入" readonly style="width: 360px;"></el-input>
            </el-form-item>

            <el-form-item label="演员表">
                <el-input v-model="movieForm.cast" placeholder="请输入" readonly style="width: 360px;"></el-input>
            </el-form-item>

            <!-- <el-form-item label="审核状态" v-if="showNoSee">
                <el-select v-model="movieForm.examineStatus" placeholder="请选择" style="width:360px">
                    <el-option v-for="item in movieExamineStatus" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item> -->
            <!-- 
            <el-form-item label="放映状态" v-if="showNoSee">
                <el-select v-model="movieForm.playStatus" placeholder="请选择" style="width:360px">
                    <el-option v-for="item in moviePlayStatus" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item> -->

        </el-form>

        <div style="margin-left: 120px;">
            <el-button type="primary" @click="onSubmit" v-if="showBtn">保存</el-button>
            <el-button @click="back">取消</el-button>
            <el-button type="success" @click="drawerss" v-if="!showBtn">查看评分评论</el-button>
        </div>
    </div>
</template>

<script>
import { importDic } from '@/utils'
import { getMovieDetail, addOrUpdateMovie, getComment, delComment, getStartScore } from '@/api/movie'
import { getToken } from '@/utils/auth'

export default {
    data() {
        return {
            movieForm: {
                movieName: '',
                last: 120,
                still: [],
                delivery: false,
                introduction: '',
                director: '',
                cast: '',
                movieType: [],
                examineStatus: 2,
                playStatus: 0,
                createBy: '',
                createTime: '',
                updateBy: '',
                updateTime: '',
                loading: 0
            },
            movieTypeList: importDic('movieType'),
            movieExamineStatus: importDic('movieExamineStatus'),
            moviePlayStatus: importDic('moviePlayStatus'),
            showNoSee: false,
            showBtn: true,
            titleName: '',
            mode: this.$route.query.mode,
            id: this.$route.query.id,
            formDisabled: false,
            drawer: false,
            scoreSum: 0,
            commentList: []
        }
    },
    watch: {
        mode: {
            handler: function (mode) {
                if (this.mode === 'detail') {
                    this.titleName = '详情'
                    this.formDisabled = true
                    this.showBtn = false
                    this.showNoSee = true
                    this.getMovieDetail()
                }
            },
            immediate: true
        }
    },
    methods: {
        onSubmit() {
            this.$refs['form'].validate().then(() => {
                this.loading++
                addOrUpdateMovie(this.movieForm, getToken()).then(res => {
                    this.$router.push("/movie")
                    this.$message.success(res.message)
                }).catch(e => console.error(e)).finally(() => this.loading--)
            }).catch(e => console.error(e))
        },
        back() {
            this.$router.push("/movieArrange");
        },
        drawerss() {
            this.drawer = true
            this.getComment()
            this.getStartScore()
        },
        getMovieDetail() {
            this.loading++
            getMovieDetail(this.id, getToken()).then(res => {
                this.movieForm = res.result
            }).catch(e => console.error(e)).finally(() => this.loading--)
        },
        getComment() {
            this.loading++
            getComment(this.id).then(res => {
                this.commentList = res.result
            }).catch(e => console.error(e)).finally(() => this.loading--)
        },
        delComment(commentId){
            this.loading++
            delComment(commentId,getToken()).then(res => {
                if(res.code == 10002){
                    this.$message.success(res.message)
                    this.getComment()
                }
            }).catch(e => console.error(e)).finally(() => this.loading--)
        },
        getStartScore() {
            this.loading++
            getStartScore(this.id).then(res =>{
                this.scoreSum = res.result
            }).catch(e => console.error(e)).finally(() => this.loading--)
        }
    }
}
</script>